import React, { useState } from 'react'
import { Col, Form, Input, Button, Upload, Icon, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { formItemLayout } from '@/utils/utils'

// 上传相关
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

const AddOperator = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState('')
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 返回按钮
  const goBack = () => {
    props.history.goBack(-1)
  }
  // 上传图片
  const handleChange = (info, callback) => {
    if (info.file.status === 'uploading') {
      setLoading(true)
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => {
        setImageUrl(imageUrl)
        setLoading(false)
        callback()
      }
      );
    }
  };
  // 上传logo
  const upLoadLogo = info => {
    const callback = () => {

    }
    handleChange(info, callback)
  }
  // 上传营业执照
  const upLoadLicense = info => {
    const callback = () => {

    }
    handleChange(info, callback)
  }

  const uploadButton = (
    <div>
      <Icon type={loading ? 'loading' : 'plus'} />
      <div className="ant-upload-text">Upload</div>
    </div>
  )
  // 提交表单
  const submit = () => {
    form.validateFields(err => {
      if (!err) {
        console.info('success');
      }
    })
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={goBack}>返回</Button>
      <Form>
        <Form.Item label="运营商名称">
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '请输入运营商名称',
              },
            ],
          })(<Input placeholder="请输入运营商名称" />)}
        </Form.Item>
        <Form.Item label="运营商地址">
          {getFieldDecorator('address', {
            rules: [
              {
                required: true,
                message: '请输入运营商地址',
              },
            ],
          })(<Input placeholder="请输入运营商地址" />)}
        </Form.Item>
        <Form.Item label="联系人">
          {getFieldDecorator('contacts', {
            rules: [
              {
                required: true,
                message: '请输入联系人',
              },
            ],
          })(<Input placeholder="请输入联系人" />)}
        </Form.Item>
        <Form.Item label="联系电话">
          {getFieldDecorator('phone', {
            rules: [
              {
                required: true,
                message: '请输入联系电话',
              },
            ],
          })(<Input placeholder="请输入联系电话" />)}
        </Form.Item>
        <Form.Item>
          <span>运营商LOGO:</span>
          <Upload
            name="logo"
            listType="picture-card"
            className="logo-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            beforeUpload={beforeUpload}
            onChange={upLoadLogo}
          >
            {imageUrl ? <img src={imageUrl} alt="logo" style={{ width: '100%' }} /> : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item>
          <span>营业执照:</span>
          <Upload
            name="license"
            listType="picture-card"
            className="license-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            beforeUpload={beforeUpload}
            onChange={upLoadLicense}
          >
            {imageUrl ? <img src={imageUrl} alt="license" style={{ width: '100%' }} /> : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item>
          <div>
            <Button type="primary" htmlType="submit" onClick={submit}>提交</Button>
            <Button type="default">取消</Button>
          </div>
        </Form.Item>
      </Form>
    </PageHeaderWrapper>
  )
}

export default Form.create()(AddOperator)
